<route lang="json5">
{
  layout: 'tabbar',
  style: {
    navigationBarTitleText: '商家中心',
  },
}
</route>

<template>
    <join v-if="!store.store || !store.store.id" />
    <view v-else>
        <view class="info">
            <view>
                <wd-img width="140rpx" height="140rpx"
                    :src="store.store.avatar && store.store.avatar.url ? store.store.avatar.url : avatar" enable-preview
                    mode="aspectFill" class="profile" />
                <view class="name">
                    <view>{{ store.store.name }}</view>
                    <view>ID：{{ store.store.id }} <text style="margin-left:20rpx;">当前角色：{{ store.store_role }}</text>
                    </view>
                </view>
            </view>
            <view class="info_icon">
                <view class="i-carbon-settings" @click="goTo('/pages/store/setting')"></view>
                <!-- <view class="i-carbon-chat"></view> -->
            </view>
        </view>

        <item column title="商品管理" class="grid_box" padding="20rpx 0">
            <wd-grid :column="5">
                <wd-grid-item v-for="item, index in goods" :key="index" :text="item.title" use-icon-slot
                    icon-size="80rpx" @click="goTo(item.path)">
                    <template #icon>
                        <image :src="item.icon" mode="scaleToFill" class="grid_icon" />
                    </template>
                </wd-grid-item>
            </wd-grid>
        </item>

        <item column title="线上购物订单" class="grid_box" padding="20rpx 0">
            <wd-grid :column="5">
                <wd-grid-item v-for="item, index in online_order" :key="index" :text="item.title" use-icon-slot
                    icon-size="80rpx" @click="goTo(item.path)">
                    <template #icon>
                        <image :src="item.icon" mode="scaleToFill" class="grid_icon" />
                    </template>
                </wd-grid-item>
            </wd-grid>
        </item>

        <item column title="到店核销订单" class="grid_box" padding="20rpx 0">
            <wd-grid :column="5">
                <wd-grid-item v-for="item, index in offline_order" :key="index" :text="item.title" use-icon-slot
                    icon-size="80rpx" @click="goTo(item.path)">
                    <template #icon>
                        <image :src="item.icon" mode="scaleToFill" class="grid_icon" />
                    </template>
                </wd-grid-item>
            </wd-grid>
        </item>

        <item title="员工管理" rightIcon="arrow-right" @click="goTo('/pages/store/worker/index')" />
    </view>
</template>

<script lang="ts" setup>
import avatar from '/static/images/avatar.png';
import { useStore } from "@/utils/store";
import join from "./join.vue";
import online_order0 from "/static/images/mer_order1.png";
import online_order1 from "/static/images/mer_order2.png";
import online_order2 from "/static/images/mer_order3.png";
import online_order3 from "/static/images/mer_order4.png";
import online_order4 from "/static/images/mer_order5.png";
import good00 from "/static/images/mer_shop2.png";
import good01 from "/static/images/mer_shop6.png";
import offline_order0 from "/static/images/usericon1.png";
import offline_order1 from "/static/images/usericon2.png";
import offline_order2 from "/static/images/usericon3.png";
import offline_order3 from "/static/images/usericon4.png";
import offline_order4 from "/static/images/usericon5.png";
import { goTo } from "@/utils/url";
const store = useStore();

onShow(() => {
    store.setMemberData()
})

const goods = reactive([
    { icon: good00, title: '商品管理', path: '/pages/store/goods/index' },
    { icon: good01, title: '店铺主页', path: '/pages/store/goods/index' },
]);

const online_order = reactive([
    { icon: online_order0, title: '全部', path: '' },
    { icon: online_order1, title: '待发货', path: '' },
    { icon: online_order2, title: '已发货', path: '' },
    { icon: online_order3, title: '已收货', path: '' },
    { icon: online_order4, title: '售后', path: '' },
])

const offline_order = reactive([
    { icon: offline_order0, title: '全部', path: '' },
    { icon: offline_order1, title: '待付款', path: '' },
    { icon: offline_order2, title: '待核销', path: '' },
    { icon: offline_order3, title: '已核销', path: '' },
    { icon: offline_order4, title: '售后', path: '' },
])
</script>

<style lang="scss" scoped>
.info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    margin-bottom: 20rpx;
    color: white;
    background: linear-gradient(to right, #40aff4, #199bfd);
    border-radius: 12rpx;
}

.info>view {
    display: flex;
}

.name {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.name>view:first-child {
    font-size: 36rpx;
    font-weight: bold;
}

.name>view:last-child {
    font-size: 28rpx;
}

.profile {
    margin-right: 20rpx;
    overflow: hidden;
    background: white;
    border-radius: 12rpx;
}

.info_icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 140rpx;
    font-size: 34rpx;
}

.grid_box :deep(.title) {
    margin-left: 26rpx;
}

:deep(.wd-grid-item__content) {
    padding: 10rpx 0 20rpx;
}

.grid_icon {
    width: 80rpx;
    height: 80rpx;
}
</style>
